<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue4/vue4-1.js"></script>
  </head>
  <body style="background-color: #1e293b;color: #c9d1d9;">
    <h1 id="app">{{name}}</h1>
    <script> 
        //将对象设置为响应式数据
        const data = reactive( { name : 'xiaohong', age: 3} )

        //副作用函数
        function effectName(){
          console.log('effectName...',data.name);  //压入Map
        }
        effect(effectName)
        effect( effectAge = ()=>{
          console.log('effectAge...',data.age);    //压入Map
        })
    

        setTimeout(()=>{
           data.name = 'newking'
        },1000)
     
    </script> 
  </body>
</html>